<template>
  <div>

<van-row>
  <van-col span="5">
  
  <div class="dv">
      <van-sidebar v-model="activeKey">
  <van-sidebar-item :title="item.title" v-for="(item,index) in list" :key="index" @click="xz(index)"/>
</van-sidebar>
  </div>

  </van-col>



  <van-col span="19">

    <div class="box" @touchstart="cm" ref="box">


    <div  v-for="(item,index) in list"
    ref="right"
  :key="index"
  >
  <h1>{{index}}</h1>
<van-card
  v-for="(item,index) in item.children"
  :key="index"
  :price="item.price"
  :title="item.title"
  :thumb="item.img"
>
  <template #footer>
    <van-button size="mini" @click="add(item)"><van-icon name="cart-o" size='30'/></van-button>
  </template>
</van-card>
</div>
    </div>


  </van-col>
</van-row>




<div class="db">
  <div v-if="this.$store.state.shopcar.length==0">
    <van-icon name="smile-o" size="50"/>
</div>
<div v-else>
  <van-icon name="smile" size="50" color="yellow" @click="shows"/>
</div>
<span>
  <span style="color:red;">￥{{num}}</span>
  <span>立即购买</span>
</span>
</div>

<van-popup v-model="show" position="bottom" style="overflow:scroll;" class="qq">
  <li v-for="(item,index) in this.$store.state.shopcar" :key="index">
    <span style="flex:6">商品：{{item.title}}</span>
    <span style="flex:4">价格：<span style="color:red">￥{{item.price}}</span></span>
    <span style="flex:6;textAlign:center;"><van-stepper v-model="item.num" @change="change"/></span>
    <span style="flex:2" @click="remove(index)">删除</span>
  </li>
</van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data () {
    return {
      list: '',
      activeKey:'',
      show:false
    }
  },
  computed:{
    num(){
      var num=0
      this.$store.state.shopcar.forEach(res=>{
        num+=res.num*res.price
      })
      return num
    }
  },
  mounted() {
    this.getlist()
    this.cm()
  },
  methods:  {
    getlist(){
      this.$http('/data.json').then(res=>{
        console.log(res.data.data);
        this.list=res.data.data
      })
    },

    xz(x){
     this.$refs.box.removeEventListener('scroll',this.func)
  var doc= this.$refs.right[x]
     doc.scrollIntoView({behavior:'smooth'})
    },



    cm(){
      this.$refs.box.addEventListener('scroll',this.func)
    },
    func(){

        var doc=this.$refs.right
        // console.log(this.$refs.box.scrollTop);
        for(let i=0;i<doc.length;i++){
          if(this.$refs.box.scrollTop==12082.400390625){
            this.activeKey=this.list.length-1
            return
          }
          if(i<doc.length-1){
            var l=i+1
          }else{
            var l=i
          }
          if(doc[i].offsetTop<=this.$refs.box.scrollTop&&this.$refs.box.scrollTop<=doc[l].offsetTop){
           this.activeKey=i
          }
        }
      
    },


shows(){
  this.show=true
},
add(item){
  this.$store.commit('add',item)
  Toast.success('添加成功');
},
change(){
  this.$store.commit('change')
},
remove(index){
  this.$store.commit('remove',index)
}



  }
}
</script>

<style lang='scss' scoped>
.box{
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
.dv{
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
.db{
  width: 100%;
  background: #ccc;
  height: 8vh;
  z-index: 10000000000;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  >div{
    position: absolute;
    left: 50px;
    top: -20px;
  }
  >span{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >span{
      font-size: 18px;
    }
  }
}
li{
  list-style: none;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
  border-bottom:1px solid #ccc;
  padding-bottom: 5px;
  box-sizing: border-box;
  padding: 0 20px;
}
.qq{
  height: 200px;
  overflow: scroll!important;
}
</style>
